<template>
  <view class="box">
    <view class="body">
      <view class="container">
        <view class="title">{{ list.title }}</view>
        <view class="inner">{{ list.question }}</view>
        <view class="footer">
          <view class="footer_left">
            <view>{{ "匿名" }}</view>
            <view>{{ list.time }}</view>
          </view>
        </view>
      </view>
      <view class="footer">
        <view class="footer_title"> 评论区 </view>
        <view class="footer_inner">
          <view class="footer_inner_left">
            <image :src="list.src" mode="aspectFit" />
          </view>
          <view class="footer_inner_right">
            <view class="footer_inner_right_name">{{ list.username }}</view>
            <view class="footer_inner_right_speak">{{ list.answer }}</view>
            <view class="footer_inner_right_time">{{ list.time }}</view>
          </view>
        </view>
        <view class="footer_end">THE END</view>
      </view>
    </view>
  </view>
</template>
<script>
import uniNavBar from "@/components/uni-nav-bar/uni-nav-bar.vue";
export default {
  components: { uniNavBar },
  onLoad: function (option) {
    if (option) {
      let list = JSON.parse(uni.getStorageSync("uselist"));
      this.list = list[option.index];
    }
  },
  data() {
    return {
      list: {},
    };
  },
  methods: {
    goback() {
      uni.switchTab({
        url: `../anonymous/index`,
      });
    },
  },
};
</script>
<style lang="scss" scoped>
.box {
  width: 100%;
  height: 100%;
  background-color: #e5e5e5;
}
.body {
  width: 100%;
  height: 100%;
  .container {
    width: 100%;
    /* height: 100%; */
    margin: 0 0 20upx -10upx;
    padding: 10upx;
    background: #fff;
    .title {
      width: 96%;
      height: 80upx;
      display: flex;
      align-items: center;
      justify-content: left;
      color: #000;
      margin-left: 2%;
      font-size: 12px;
      font-weight: bolder;
    }
    .inner {
      width: 96%;
      height: 120upx;
      margin-left: 2%;
      display: flex;
      align-items: top;
      justify-content: left;
      color: rgb(79, 77, 87);
    }
    .footer {
      width: 96%;
      display: flex;
      justify-content: space-between;
      align-items: center;
      color: #cccccc;
      margin-left: 2%;
      .footer_left {
        width: 60%;
        display: flex;
        view {
          width: 50%;
          justify-content: left;
        }
      }
    }
  }
  .footer {
    width: 100%;
    height: 100%;
    margin: 20upx 0 20upx -10upx;
    padding: 10upx;
    position: relative;
    background: #fff;
    .footer_title {
      width: 100%;
      height: 80upx;
      display: flex;
      align-items: center;
      justify-content: left;
      font-size: 14px;
      border-bottom: 2upx solid #ccc;
      padding: 10upx;
    }
    .footer_inner {
      width: 100%;
      margin-top: 30upx;
      height: 200upx;
      display: flex;
      justify-content: space-between;
      .footer_inner_left {
        width: 100upx;
        height: 100upx;
        image {
          width: 100upx;
          height: 100upx;
          border-radius: 50%;
        }
      }
      .footer_inner_right {
        width: 80%;
        .footer_inner_right_name {
          color: #cccccc;
        }
        .footer_inner_right_speak {
          height: 120upx;
        }
        .footer_inner_right_time {
          color: #e5e5e5;
        }
      }
    }
    .footer_end {
      margin-top: 30upx;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .footer_end:before {
      content: "";
      position: absolute;
      bottom: 7%;
      left: 0px;
      background: #dad6d6;
      width: 35%;
      height: 1px;
    }
    .footer_end:after {
      content: "";
      position: absolute;
      bottom: 7%;
      right: 0px;
      background: #dad6d6;
      width: 35%;
      height: 1px;
    }
  }
}
</style>